<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorate="main"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>制定开发计划</title>
    <link th:href="@{/localcss/crmlist.css}" href="../static/localcss/crmadd.css" rel="stylesheet">
</head>
<body>
<div layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>销售机会详情</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <tr role="row">
                                            <th class="sorting_asc" style="width: 200px">编号</th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcId}"></td>
                                            <th class="sorting_asc" style="width: 200px">客户名称
                                            </th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcCustName}"></td>
                                        </tr>
                                        <tr role="row" class="odd">
                                            <th class="sorting_asc" style="width: 200px">负责人
                                            </th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcLinkman}"></td>
                                            <th class="sorting_asc" style="width: 200px">机会来源
                                            </th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcSource}"></td>
                                        </tr>
                                        <tr role="row">
                                            <th class="sorting_asc" style="width: 200px">成功机率(%)
                                            </th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcRate}"></td>
                                            <th class="sorting_asc" style="width: 200px">公司电话
                                            </th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcTel}"></td>
                                        </tr>
                                        <tr role="row">
                                            <th class="sorting_asc" style="width: 200px">概要
                                            </th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcTitle}"></td>
                                            <th class="sorting_asc" style="width: 200px">机会描述
                                            </th>
                                            <td tabindex="0" class="sorting_1"
                                                th:text="${chance.chcDesc}"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>编辑客户开发计划</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content" style="display: block;">
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                style="width: 10px;"
                                                aria-label="First name: activate to sort column descending">
                                                日期
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                style="width: 70px;"
                                                aria-label="Last name: activate to sort column ascending">
                                                计划项
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                style="width: 70px;"
                                                aria-label="Last name: activate to sort column ascending">
                                                操作
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="odd" th:each="plan:${planList}">
                                            <td style="width: 70px;"
                                                th:text="${#dates.format(plan.plaDate, 'yyyy-MM-dd')}">2023-12-12
                                            </td>
                                            <td>
                                                <input name="plaTodo" class="form-control col-md-7 col-xs-12" style="width: 100%"
                                                       data-validate-words="1" required="required"
                                                       placeholder="请输入计划项内容" type="text" value="商讨"
                                                       th:value="${plan.plaTodo}">
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-primary" value="修改"
                                                        th:onclick="|updatePlan(this,${plan.plaId})|">修改
                                                </button>
                                                <button type="button" class="btn btn-primary" value="删除"
                                                        th:onclick="|doDel(this,${plan.plaId})|">删除
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>新增客户开发计划</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content" style="display: block;">
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                style="width: 10px;"
                                                aria-label="First name: activate to sort column descending">
                                                日期
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                style="width: 70px;"
                                                aria-label="Last name: activate to sort column ascending">
                                                计划项
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                style="width: 70px;"
                                                aria-label="Last name: activate to sort column ascending">
                                                操作
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr role="row" class="odd">
                                            <td th:text="${now}">2023-12-12</td>
                                            <td>
                                                <input name="plaTodo" class="form-control col-md-7 col-xs-12"
                                                       data-validate-words="1" required="required"
                                                       placeholder="请输入计划项内容" type="text" style="width: 100%">
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-primary" value="添加"
                                                        th:onclick="|addPlan(this,${chance.chcId})|">添加
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                            <button id="send" type="button" th:onclick="|addPlanResult(${chance.chcId})|" class="btn btn-success">执行计划</button>
                            <button type="button" class="btn btn-primary" id="back">返回</button>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <br/><br/>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script layout:fragment="js">
    $(document).ready(function () {
        $("#back").on("click", function () {
            window.history.back();
        });
    });
    //添加客户执行计划
    function addPlan(ele,chcId) {
        var planName = $(ele).parent().prev().find("input[name=plaTodo]").val();
        if (planName == "") {
            alert("请输入计划项内容")
            return;
        }
        $.post("/plan/save",
            {plaTodo: planName,plaChcId:chcId},
            function (data) {
                if (data.delResult == true) {
                    alert("添加成功")
                    location.reload();
                } else {
                    alert("添加失败")
                }
            },
            "json");
    }
    //修改客户执行计划
    function updatePlan(ele,id) {
        var planName = $(ele).parent().prev().find("input[name=plaTodo]").val();
        if (planName == "") {
            alert("请输入计划项内容")
            return;
        }
        $.post("/plan/update",
            {plaTodo: planName, plaId: id},
            function (data) {
                if (data.delResult == true) {
                    alert("修改成功")
                }else{
                    alert("修改失败")
                }
            },
            "json"
        )
    }
    //删除
    function doDel(obj, id) {
        if (confirm("你确定需要删除该开发计划项吗？")) {
            $.ajax({
                type: "GET",
                url: "/plan/delete",
                data: "id=" + id,
                dataType: "json",
                success: function (data) {
                    if (data.delResult == true) {//删除成功：移除删除行
                        alert("删除成功！");
                        $(obj).parents("tr").remove();
                    } else {
                        alert("对不起，删除失败！");
                    }
                },
                error: function (data) {
                    alert("对不起，删除失败！");
                }
            });
        }
    }

    //执行开发计划
    function addPlanResult(id) {
        location.href = "/plan/addPlanResult?id=" + id;
    }
</script>
</html>